<template>
	<view class="body p30">
		<view class="card bg-white br12 p30">
			<view class="f26 fb">江门市利洁能源加气站</view>
			<view class="orange f20 mt10">加气有礼，24小时加注</view>
			<view class="d-s-c mt30">
				<view class="f20 mr30">广东省江门市江海区五邑路与永康路交叉路口往南约90米</view>
				<view class="distance d-s-c">
					<u-icon name="map" color="#FF7E11" size="10"></u-icon>
					<text class="f20">30km</text>
				</view>
			</view>
		</view>
		<view class="card bg-white br12 p30 mt30 d-b-c">
			<view class="mr20">92#</view>
			<view class="d-b-c flex-1">
				<view class="item d-c-c d-c flex-1">
					<view class="f20 mb10">利洁能源价</view>
					<view class="f30 red border-right ww100 tc">￥7.30 <text class="f20">起</text> </view>
				</view>
				<view class="item gray9 d-c-c d-c flex-1">
					<view class="f20 mb10">起点价</view>
					<view class="f30 border-right ww100 tc">￥7.30 <text class="f20">起</text> </view>
				</view>
				<view class="item gray9 d-c-c d-c flex-1">
					<view class="f20 mb10">国标价</view>
					<view class="f30 ww100 tc">￥7.30 <text class="f20">起</text> </view>
				</view>
			</view>
		</view>
		<view class="card bg-white br12 p30 mt30">
			<view class="menu d-b-c ww100 br12">
				<view class="d-c-c flex-1">
					<image src="@/static/image/icon1.png" mode="widthFix" class="mr10"></image>
					<text class="mr10 f20">LNG</text>
					<u-icon name="arrow-down-fill" color="#999" size="12"></u-icon>
				</view>
				<view class="d-c-c flex-1">
					<image src="@/static/image/icon2.png" mode="widthFix" class="mr10"></image>
					<text class="mr10 orange f20">请选择抢号</text>
					<u-icon name="arrow-down-fill" color="#999" size="12"></u-icon>
				</view>
			</view>
			<view class="price d-s-c br12 mt20 p20">
				<text class="mr10">￥</text>
				<input type="text" placeholder="请输入金额" />
			</view>
			<view class="list mt20 d-b-c">
				<view class="item br12 f30 d-c-c" v-for="(item,index) in 3" :key="index">
					￥{{index*2}}00
				</view>
			</view>
		</view>

		<view class="card bg-white br12 p30 mt30">
			<view class="d-s-c">
				<text class="f30 fb mr20">合计优惠</text>
				<text class="f20 gray9">己为您默认选择最高优惠</text>
			</view>
			<view class="items d-b-c mt20">
				<view class="d-s-c">
					<image src="@/static/image/item1.png" mode="widthFix"></image>
					<view class="f20 ml10">优惠券</view>
				</view>
				<view class="f20 d-s-c" @click="setPop('popup3',true)">
					<text class="mr10">-￥0.00</text>
					<u-icon name="arrow-right" size="12" color="#000"></u-icon>
				</view>
			</view>
			<view class="items d-b-c mt20">
				<view class="d-s-c">
					<image src="@/static/image/item2.png" mode="widthFix"></image>
					<view class="f20 ml10">利洁能源优惠</view>
				</view>
				<view class="f20 d-s-c">
					<text class="mr10 red">-￥0.00</text>
				</view>
			</view>
			<view class="items d-b-c mt20">
				<view class="d-s-c">
					<image src="@/static/image/item3.png" mode="widthFix"></image>
					<view class="f20 ml10">会员优惠</view>
				</view>
				<view class="f20 d-s-c">
					<text class="mr10 gray9">-￥0.00</text>
				</view>
			</view>
			<view class="line mt10 mb10"></view>
			<view class="tr mt10 f20">
				<text class="gray9">(已优惠 <text class="red">￥0.00</text>)</text>
				<text>小计</text>
				<text class="red">￥200.00</text>
			</view>
		</view>

		<view class="card bg-white br12 p30 mt30">
			<view class="d-s-c">
				<text class="f30 fb mr20">支付方式</text>
			</view>
			<view class="items d-b-c mt20 opacity">
				<view class="d-s-c">
					<image src="@/static/image/item4.png" mode="widthFix"></image>
					<view class="f20 ml10">E账户</view>
				</view>
				<view class="f20 d-s-c">
					<text class="mr10 red">（余额可用 0.00）</text>
					<radio disabled />
				</view>
			</view>
			<view class="items d-b-c mt20">
				<view class="d-s-c">
					<image src="@/static/image/item5.png" mode="widthFix"></image>
					<view class="f20 ml10">利洁能源优惠</view>
				</view>
				<view class="f20 d-s-c">
					<radio color="#FF7E11" />
				</view>
			</view>
		</view>

		<view class="card bg-white d-b-c br12 mt30">
			<view class="f20 ml30 d-c-c">加油实付:<text class="red f26 ml5">￥200.00</text></view>
			<view class="d-f">
				<view class="f20 d-b-c mr20 gray6" @click="setPop('popup4',true)">
					<text class="mr5">明细</text>
					<u-icon name="arrow-up" color="#666" size="10"></u-icon>
				</view>
				<view class="bg-orange btn white d-c-c">去支付</view>
			</view>
		</view>
		<u-popup mode="center" :show="popup1" @close="setPop('popup1',false)">
			<view class="popup1 p30">
				<view class="title f28 tc">选择品类</view>
				<view class="pl15 pr15 pt30 d-s-s d-c">
					<view v-for="(item,index) in moreList" :key="index" class="ww100">
						<view class="tl pl30 pr30">{{item.name}}</view>
						<view class="d-s-c f-w pt20 pb20">
							<view class="item flex-1 gray6 f28 d-c-c" v-for="(e,i) in item.key" :key="i">
								{{e.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="popup2" @close="setPop('popup2',false)">
			<view class="popup1 p30">
				<view class="title f28 tc">选择抢号</view>
				<view class="pl15 pr15 pt30 d-s-s f-w">
					<view class="item gray6 f28 d-c-c" v-for="(item,index) in list" :key="index">{{item}}</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="popup3" @close="setPop('popup3',false)">
			<view class="popup3">
				<view class="fb f28 tc p30">请选择优惠券</view>
				<view class="pos" @click="setPop('popup3',false)">
					<u-icon name="close" size="15"></u-icon>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="list p20" v-if="coupon.length>0">
						<radio-group v-for="(item,index) in coupon" :key="index"
							class="item br12 d-b-c bg-white ww100 mb30">
							<view class="left bg-red d-c-c d-c white">
								<view>￥<text class="f50 fb">{{item.price}}</text></view>
								<view class="f18">满{{item.max}}可用</view>
							</view>
							<view class="right d-b-e flex-1 pt20 pb10 pl20 pr20">
								<view class="gray9">
									<view class="f20">{{item.content}}</view>
									<view class="f18 mt10">{{item.time}}</view>
								</view>
								<radio color="#FF7E11" :checked="item.checked" />
							</view>
						</radio-group>
					</view>
					<u-empty v-else icon="/static/image/empty.png" text="暂无可用优惠券哦~"></u-empty>
				</scroll-view>
				<view class="d-b-c p20">
					<view class="f20 d-s-c mr20 gray6 flex-1">
						<text class="mr5">优惠券合计</text>
						<text>￥0.00</text>
					</view>
					<view class="bg-orange btn white d-c-c">确认</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="popup4" @close="setPop('popup4',false)">
			<view class="popup4 p20">
				<view class="fb f28 tc p30">待支付明细</view>
				<view class="pos" @click="setPop('popup4',false)">
					<u-icon name="close" size="15"></u-icon>
				</view>
				<view class="item fb f26">商品明细：</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>品类/抢号</text>
					<text>LNG/06枪</text>
				</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>站点单价</text>
					<text>5.90元/公斤</text>
				</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>结算单价</text>
					<text>5.90元/公斤</text>
				</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>交易金额</text>
					<text>￥300.00</text>
				</view>
				<view class="item fb f26 mt40">商品明细：</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>优惠券抵扣</text>
					<text class="red">-￥0.00</text>
				</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>利洁能源优惠</text>
					<text class="red">-￥0.00</text>
				</view>
				<view class="item gray9 f26 d-b-c mt20">
					<text>会员优惠</text>
					<text class="red">-￥0.00</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popup1: false,
				popup2: false,
				popup3: false,
				popup4: true,
				moreList: [{
					name: '汽油',
					key: [{
						name: '92#',
						checked: false
					}, {
						name: '95#',
						checked: false
					}, {
						name: '98#',
						checked: false
					}]
				}, {
					name: '菜油',
					key: [{
						name: '92#',
						checked: false
					}, {
						name: '95#',
						checked: false
					}, {
						name: '98#',
						checked: false
					}]
				}],
				list: ['01枪', '02枪', '03枪', '04枪', '05枪', '06枪', '07枪', '08枪', '09枪', '10枪', '11枪', '12枪'],
				coupon: [{
					price: 5,
					max: 200,
					content: '适用于在钱包APP或利洁能源加油小程序购买利洁能源加油券',
					time: "2025.02.11-2025.02.14",
					checked: false
				}, {
					price: 5,
					max: 200,
					content: '适用于在钱包APP或利洁能源加油小程序购买利洁能源加油券',
					time: "2025.02.11-2025.02.14",
					checked: false
				}, {
					price: 5,
					max: 200,
					content: '适用于在钱包APP或利洁能源加油小程序购买利洁能源加油券',
					time: "2025.02.11-2025.02.14",
					show: false
				}, {
					price: 5,
					max: 200,
					content: '适用于在钱包APP或利洁能源加油小程序购买利洁能源加油券',
					time: "2025.02.11-2025.02.14",
					show: false
				}]
			}
		},
		methods: {
			setPop(name, bool) {
				this[name] = bool
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup4 {
		position: relative;

		.pos {
			right: 30rpx;
			top: 30rpx;
			position: absolute;
		}
	}

	.popup3 {
		position: relative;

		.pos {
			right: 30rpx;
			top: 30rpx;
			position: absolute;
		}

		// height: 50vh;
		.scroll {
			height: 40vh;

			.item {
				overflow: hidden;
				height: auto !important;
				border: 0;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, .15);

				.left {
					width: 160rpx;
					height: 160rpx;
					background-image: url('/static/image/coupon_bg.png');
					background-size: 60rpx;
					background-position: 10rpx calc(100% - 10rpx);
					background-repeat: no-repeat;
				}

				.bottom {
					max-height: 0;
					overflow: hidden;
					transition: 0.3s;
					line-height: 1.5;
				}

				.active {
					max-height: 200rpx;
					transition: 0.3s;

				}
			}
		}
	}

	.btn {
		height: 100rpx;
		width: 210rpx;
	}

	.opacity {
		opacity: 0.5;
	}

	.items {
		image {
			width: 30rpx;
		}

	}

	.active {
		background-color: #FF7E11;
		color: #fff;
	}

	.popup1 {
		width: 700rpx;
		background-color: #fff;

		.item {
			width: calc(33.33% - 30rpx);
			height: 60rpx;
			margin: 15rpx;
			background-color: #F7F8FA;
			border: 0;
		}

	}

	.list {
		.item {
			height: 80rpx;
			width: 180rpx;
			border: 1px solid #979797;
		}
	}

	.price {
		height: 80rpx;
		border: #C0BFBD solid 1px;

	}

	.menu {
		background-color: #FFF6EE;
		border: #FF7E11 1px solid;
		height: 80rpx;

		image {
			width: 35rpx;
		}
	}

	.card {
		overflow: hidden;

		.item {
			.border-right {
				border-right: 1px solid #EFEFEF;
			}
		}
	}

	.body {
		min-height: 100vh;
		background-color: #f4f4f4;
	}

	.distance {
		background-color: #EFEFEF;
		border-radius: 10rpx;
		padding: 8rpx 20rpx;
	}
</style>